<script>
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { reactive, ref, toRefs } from '@vue/reactivity'
export default {
    setup() {
        let router = useRouter()
        let store = useStore()
        let downshow = ref(true)
        let goBack = () => {
            router.go(-1)
        }
        
        let arry = reactive({
            List:null
        })
        arry.List = store.state.collec
        if(!arry.List||arry.List.length==0){
        downshow.value=true
        }else{
            downshow.value=false
        }
        let del = (key)=>{
            store.commit("dels",key)
            if(!arry.List||arry.List.length==0){
        downshow.value=true
        }else{
            downshow.value=false
        }
        }

        let goshop = (key)=>{
            // console.log(key);
            router.push({
                path:"/shopping",
                query:{
                    key:key
                }
            })
        }

        return {
            goBack,
            ...toRefs(arry),
            del,
            goshop,
            downshow

        }
    },
}
</script>

<template>
    <div class="container">
        <div class="titles" @click="goBack">
            我的收藏
        </div>


        <div class="box1" v-if="!downshow">
            <!-- 内容 -->
            
            <div @click="goshop(item.bannerData.key)" class="SwipeCell" v-for="(item,index) in List" :key="index">
                <van-swipe-cell>
                    <van-card :price="item.bannerData.disprice" :desc="item.bannerData.title" class="goods-card"
                        :thumb="item.bannerData.img" />
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" @click="del(item.bannerData.key)" />
                    </template>
                </van-swipe-cell>
            </div>

        </div>
        <!-- 离线视频没有 -->
        <div class="emptybox" v-if="downshow">
          <img src="../assets/img/ic_empty_content.9efeb7f.png" alt="" />

          <h6>你还没有收藏商品~</h6>
        </div>


    </div>

</template>

<style lang="scss">
@import "../assets/css/base.css";

.goods-card {
    margin: 0;
    background-color: #fff;
}

.delete-button {
    height: 100%;
}

.titles {
    height: 43px;
    line-height: 43px;
    text-align: center;
    color: #151515;
    font-size: 16px;
    font-weight: 700;
    background: url(../assets/img/下载.png) no-repeat 10px center;
    background-size: 25px 25px;

}

.box1 {
    // display: flex;
    margin-bottom: 10px;
    .SwipeCell{
        padding-top: 10px;
        border-bottom: 1px solid #c4c4c4;
    }
    .content {
        display: flex;
        flex: 1;
        height: 135px;
        background-color: #f7f7f9;
        border-radius: 6px;
        margin-left: 6px;
        padding-bottom: 10px;

        .left {
            display: flex;
            width: 90px;
            height: 116px;
            margin-right: 14px;
            height: 135px;
            align-items: center;

            img {
                width: 90px;
                height: 116px;
            }
        }

        .right {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: space-evenly;

            h6 {
                color: #2f2526;
                font-size: 14px;
                font-weight: bold;
                width: 260px;
                overflow: hidden; // 溢出部分隐藏 
                white-space: nowrap; // 文字不换行
                text-overflow: ellipsis; // 显示省略号
            }

            .text {
                color: #142b3d;
                display: flex;
                width: 100%;
                justify-content: space-between;
            }
        }
    }

}
 .emptybox {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;

    img {
      width: 150px;
      height: 150px;
    }

    h6 {
      color: #7d7d7d;
      font-weight: normal;
    }
  }
</style>